<template>
  <div class="category">
    <p>菜单  <i>购物车</i></p>
    <ul>
      <li>全部</li>
      <li>前菜</li>
      <li>主食</li>
      <li>肉类</li>
      <li>甜品</li>
    </ul>
    <van-swipe-cell>
      <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        class="goods-card"
        thumb="https://img.yzcdn.cn/vant/cat.jpeg"
      />
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import Vue from 'vue'
import { SwipeCell, Button, Card } from 'vant'

Vue.use(SwipeCell)
Vue.use(Button)
Vue.use(Card)
export default {
  name: 'Category'
}
</script>

<style lang="scss" scoped>
   .goods-card {
    margin: 0;
    background-color: #fff;
  }

  .delete-button {
    height: 100%;
  }
</style>
